<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/views/common/resources.jsp" %>         
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时报警</title>
    <link href="${basePath}resources/js/common/plugin/select2/css/select2.min.css" rel="stylesheet">
    <link href="${basePath}resources/js/common/plugin/My97DatePicker/skin/WdatePicker.css" rel="stylesheet">
    <script src="${basePath}resources/js/common/plugin/select2/js/select2.min.js"></script>
    <script src="${basePath}resources/js/common/plugin/My97DatePicker/WdatePicker.js"></script>
    <script src="${basePath}resources/js/common/plugin/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=d782d52560e7b77e0d764b1496c60dde"></script>
    <script>
    	var vehList = ${vehList};
    	var pendingList = ${pendingList};
    </script>
	<style>
		#ajax-loading{position:absolute;left:50%; top:50%;margin-left:-100PX;margin-top:-50PX;}
	</style>
</head>
<body class="realAlarm">
<div class="page">
	<%@ include file="/views/common/top.jsp" %> 
	<div class="main ">
        <div class="slider pa clearfix">
       		<%@ include file="/views/common/menu.jsp" %> 
       	</div>
       	<div class="content pr clearfix">
       		<div class="tab-alarm fl pa">
       			<ul id="all-alarm-ul">
       				<li id="all-alarm" class='list active' alarmType="0"><a href='javascript:;'>全部报警(<span id="all-alarm-sum">0</span>)</a></li>
       				<c:forEach items="${alarmGroup}" var="item" varStatus="status">
       					<c:if test="${status.index == 0 }">
				        	<li class='list' count="${item.count}" alarmType="${item.alarmType}">
				        		<a href='javascript:;'>${item.alarmName}(${item.count})</a>
				        	</li>
				        </c:if>
				        <c:if test="${status.index != 0 }">
				        	<li class='list' count="${item.count}" alarmType="${item.alarmType}">
				        		<a href='javascript:;'>${item.alarmName}(${item.count})</a>
				        	</li>
				        </c:if>
				    </c:forEach>
       			</ul>
       		</div>
       		<div class="tab-alarm-info">
       			<div class="date-alarm pr">
       				<div class="line pa date-alarm"></div>
       				<ul class="clearfix date-alarm-ul">
       					<li class="fl list"><a class="db" href="javascript:;">待处理报警</a></li>
       					<li class="fl list"><a class="db" href="javascript:;">今日报警</a></li>
       					<%--<li class="fl list"><a class="db" href="javascript:;">历史报警</a></li>--%>
       				</ul>
       			</div>
       			<div class="tab-alarm-cont">
       				<div class="pendingAlarm db tab-alarm-cont-list">
       					<div id="pendAlarm">
       						<div class="queryAlarm clearfix pr">
       							<div class="selectAlarm fl mtb15">
       								<select id="pendingQuaryCar" name="pendingQuaryCar" class="select2 " placeholder="请选择车辆查询"><option value=''>请选择车牌号码</option></select>
       							</div>
       							<div class="selectAlarm fl mtb15" style="width:80px;">
       								<input id="isfresh" type="checkbox" checked="checked"> <label class="label">禁止刷新</label>
       							</div>
       							<a id="pendingQueryBtn" class="queryBotton fl db btn" href="javascript:;">查询</a>
       						</div>
       					</div>
       					<div id="pendingAlarm"></div>
       				</div>
       				<div class="todayAlarm dn tab-alarm-cont-list">
						<div id="todayAlarmType">
							<div class="queryAlarm clearfix pr">
								<div class="selectAlarm fl mtb15">
									<select id="todayQueryAlarmType" name="todayQueryAlarmType" class="select2 " placeholder="请选择报警类型"></select>
								</div>
								<a id="todayQueryAlarmTypeBtn" class="queryBotton fl db btn" href="javascript:;">查询</a>
							</div>
						</div>
       					<div id="todayAlarm">
						</div>
						<div id="tadayAlarmTableWarp" class="pr">
							<div id="tadayAlarmTable" style="margin-top: 0px"></div>
						</div>
       					
       				</div>
       				<div class="historyAlarm dn tab-alarm-cont-list">
       					<div id="historyAlarm">
       						<div class="queryAlarm clearfix pr" style="height:30px;overflow:hidden">
       							<div class='fl quaryAllAlarm'>
       								<div class="selectAlarm fl mtb15">
       									<select id="quaryCar" name="quaryCar" class="select2 " placeholder="请选择车辆查询"></select>
       								</div>
       								<div class="selectAlarm fl mtb15">
       									<select id="quaryType" name="quaryType" class="select2" placeholder="请选择报警类型"></select>
       								</div>
       								<div class="selectAlarm fl mtb15">
       									<select id="quaryCondition" name="quaryCondition" class="select2" placeholder="报警条件">
       										<option value=''>请选择报警来源</option>
       										<option value=10>平台报警</option>
       										<option value=1>终端报警</option>
       									</select>
       								</div>
       								<div class="fl clearfix mtb15">
   										<input type="text" id="inputStartDate" class="query-input fl Wdate Time_input" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'})">
   									</div>
   									<div class="fl clearfix mtb15" >
   										<input type="text" id="inputEndDate"  class="query-input Wdate Time_input" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'})">
   									</div>
   									<div class="selectAlarm fl mtb15">
		       								<select id="ishandle" name="ishandle" class="select2" placeholder="是否处理" style="">
		       									<option value=''>请选择是否处理</option>
		       									<option value=0>未处理</option>
		       									<option value=1>已处理</option>       									
		       								</select>
		       							</div>
		       							<div class="inputAlarm fl clearfixx mtb15">
		       								<label class="fl">处理人：</label>
		       								<input class="dealPeople fl" id="dealPeople" type="text" placeholder="请输入处理人">
		       							</div>
       							</div>
       							<div class='fr querAllBotton'>
       								<a class="queryBotton fl db btn" style="margin-right:15px;line-height: 28px;height:28px"  id="senior" href="javascript:;">高级</a>
       								<a class="queryBotton fl db btn" style="margin-right:15px;line-height: 28px;height:28px" id="queryAlarm" href="javascript:;">查询</a>
       						 		<a class="queryBotton fl db btn" style="line-height: 28px;height:28px" id="dealAlarm" href="javascript:;">处警</a>
       							</div>
       							
       						</div>
       					</div>
       					<div id="queryResult">
       					</div>
       				</div>
       			</div>
       		</div>
       	</div>
       	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  			<div class="modal-dialog modal-lg" role="document">
   				 <div class="modal-content">
     				<div class="penddingAlarmdetail"></div>
   				 </div>
 			</div>
		</div>

		<!-- 待处理报警处理弹窗 -->
		<div id="handleAlarm" class="modal hide fade"  tabindex="-1" role="dialog" aria-labelledby="handleAlarmLabel" aria-hidden="true">
  			<div class="modal-header">
    			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    			<!-- 隐藏表单记录处警的vid,atype,atime -->
    			<input type="hidden" id="handlerVevhicleid" />
    			<input type="hidden" id="handlerAlarmType" />
    			<input type="hidden" id="handlerAlarmTime" />
    			<h5 id="myModalLabel">报警处理</h5>
  			</div>
  			<div class="modal-body">
    			<div class="modal-table">
    				<table class="table" id="handleAlarm-table">
    					<thead>
    						<tr><th>车牌号</th><th>自编号</th><th>车队</th><th>报警类型</th><th>报警来源</th><th>报警内容</th><th>报警时间</th></tr>
    					</thead>
    					<tbody id="handleAlarm-table-body">
	    					<tr><td>12123</td><td>234</td><td>亿程交通</td><td>2314141231</td><td>超速</td><td>平台报警</td><td>345345</td></tr>
    					</tbody>
    				</table>
    			</div>
    			<div class="modal-form">
    				<ul class="clearfix">
    					<li class="clearfix modal-form-list">
    						<label class="fl modal-form-label">报警类型</label>
    						<input class="fl modal-form-input" disabled id="showAlarmType" value="" >
    					
    					</li>
    					<li class="clearfix modal-form-list">
    						<label class="fl modal-form-label">处理过程</label>
    						<textarea id="handerContent" class="fl modal-form-textarea" rows="" cols=""></textarea>
    					</li>
    					<li class="clearfix modal-form-list">
    						<label class="fl modal-form-label">处理结果</label>
    						<select class="fl modal-form-select" id="modal-form-select">
    							<option>真报警</option>
    							<option>假报警</option>
    						</select>
    					</li>
    					<li class="clearfix modal-form-list">
    						<label class="fl modal-form-label">处理人</label>
    						<input class="fl modal-form-input" disabled id="handlerUser" value="${username}" placeholder="请输入处理人">
    					</li>
    					<li class="clearfix modal-form-list">
    						<label class="fl modal-form-label">处理时间</label>
    						<input class="fl modal-form-input" disabled id="handlerTime" value="" >
    					</li>
    				</ul>
    			</div>
  			</div>
  			<div class="modal-footer">
    			<button class="btn closeBtn" data-dismiss="modal" aria-hidden="true">关闭</button>
    			<button class="btn" id="handleAlarmSave">处警</button>
  			</div>
		</div>
		<!-- 历史报警处理弹窗 -->
		<div id="handlehistoryAlarm" style="top:25% !important;" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="handleAlarmLabel" aria-hidden="true">
  			<div class="modal-header">
    			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    			<!-- 隐藏表单记录处警的vid,atype,atime -->
    			<input type="hidden" id="handlerhisVevhicleid" />
    			<input type="hidden" id="handlerhisAlarmType" />
    			<input type="hidden" id="handlerhisAlarmTime" />
    			<h5 id="myModalLabel">报警处理</h5>
  			</div>
  			<div class="modal-body">
    			<div class="modal-form">
    				<ul class="clearfix">
    					<li class="clearfix modal-form-list">
    						<label class="fl modal-form-label">报警类型</label>
    						<input class="fl modal-form-input" disabled id="showHistoryAlarmType" value="" >
    					</li>
    					<li class="clearfix modal-form-list">
    						<label class="fl modal-form-label">处理过程</label>
    						<textarea id="handerHistoryContent" class="fl modal-form-textarea" rows="" cols=""></textarea>
    					</li>
    					<li class="clearfix modal-form-list">
    						<label class="fl modal-form-label">处理结果</label>
    						<select class="fl modal-form-select" id="modal-hisoryform-select">
    							<option>真报警</option>
    							<option>假报警</option>
    						</select>
    					</li>
    					<li class="clearfix modal-form-list">
    						<label class="fl modal-form-label">处理人</label>
    						<input class="fl modal-form-input" disabled id="handlerHistoryUser" value="${username}" placeholder="请输入处理人">
    					</li>
    					<li class="clearfix modal-form-list">
    						<label class="fl modal-form-label">处理时间</label>
    						<input class="fl modal-form-input" disabled id="handlerHistoryTime" value="" >
    					</li>
    				</ul>
    			</div>
  			</div>
  			<div class="modal-footer">
    			<button class="btn closeBtn" data-dismiss="modal" aria-hidden="true">关闭</button>
    			<button class="btn" id="handleHistoryAlarmSave">处警</button>
  			</div>
		</div>
    </div>
</div>
<script src="${basePath}resources/js/common/main/HashMap.js"></script>
<script src="${basePath}resources/js/common/main/global.js"></script>
<script src="${basePath}resources/js/common/main/nav.js"></script>
<script src="${basePath}resources/js/business/alarm/alarmType.js"></script>
<script src="${basePath}resources/js/business/alarm/realAlarm.js"></script>
</body>
</html>